<template>
  <div class="page login">
    <!-- <LoginState v-slot="{ loginState }">
      <h1>{{ loginState ? '已登录' : '未登录' }}</h1>
    </LoginState> -->
    <div class="container-out">
    <b-container  class="wrap" fluid="sm">
      <div class="login-title">书签管理</div>
      <b-form-group
        id="input-group-1"
        label="电子邮箱地址:"
        label-for="input-1"
        description=""
      >
        <b-form-input
          id="input-1"
          v-model="form.email"
          type="email"
          required
          placeholder="邮箱地址"
        ></b-form-input>
      </b-form-group>
      <b-form-group
        id="input-group-2"
        label="你的密码:"
        label-for="input-2"
      >
        <b-form-input
          id="input-2"
          v-model="form.password"
          required
          placeholder="请输入密码"
          type="password"
        ></b-form-input>
      </b-form-group>
      <b-row>
        <b-col class="btn-wrap d-flex justify-content-center">
          <b-button variant="" @click="login">登录</b-button>
          <b-button variant="" @click="singup">注册</b-button>          
        </b-col>
      </b-row>
      <b-alert 
      style="margin-top:24px" 
      :show="alert.showAlert" 
      variant="primary" 
      :max="alert.dismissSecs" 
      @dismissed="alert.showAlert=0"
      >{{alert.alertMsg}}</b-alert>
    </b-container>
    </div>
  </div>
</template>

<script>
// import cloudbase from "@cloudbase/js-sdk";
// import cloudID from '../../cloudID';
export default {
  name: "Login",
  data: function () {
    return {
      form: {
        email: null,
        password: null,
      },
      alert:{
        showAlert:0,
        alertMsg:'',
        dismissSecs:5,//持续时长
        dismissCountDown:0
      }
      
    };
  },
  async created() {
    //async
    // await this.$cloudbase.auth();
    // console.log('this.$cloudbase.auth()',this.$cloudbase.auth().currentUser)
    if(this.$cloudbase.auth().currentUser){
      this.$router.push({
        path:"/Home"
      })
    }



  },
  methods: {
    login() {
      const app = this.$cloudbase;
      app
        .auth()
        .signInWithEmailAndPassword(
          this.form.email,
          this.form.password
        )
        .then((res) => {
          console.log('login res',res);
          let user = {uid:res.user.uid,nickName:res.user.nickName};
          // console.log('user',user);
        window.sessionStorage.setItem("user", JSON.stringify(user));
          this.$router.push({
            path: "/Home",
          });
        }).catch(err=>{
          this.alert.alertMsg = err.message;
          this.alert.showAlert = this.alert.dismissSecs;
          // console.log('err',err);
        });
      console.log("登录");
    },
    singup() {
      console.log("注册");
      const app = this.$cloudbase;
      app
        .auth()
        .signUpWithEmailAndPassword(
          this.form.email,
          this.form.password
        )
        .then((res) => {
          this.alert.alertMsg = '申请成功，请前往邮箱验证！';
          this.alert.showAlert = this.alert.dismissSecs;
          console.log("注册 res", res);
          // 发送验证邮件成功
        })
        .catch((err) => {
          this.alert.alertMsg = err;
           this.alert.showAlert = this.alert.dismissSecs;
          // console.log("注册 err", err);
        });
    },
  },
};
</script>
<style scoped>
  @import url('./login.css');
</style>